<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>网页时钟</title>
  <style>
    * {
      box-sizing: border-box;
    }

    .clock {
      width: 600px;
      height: 600px;
      background: url(./images/clock.jpg) no-repeat;
      margin: 0 auto;
      position: relative;
    }

    .hh,
    .mm,
    .ss {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: url(./images/hour.png) no-repeat center;
    }

    .mm {
      background-image: url(./images/minute.png);
      transform: rotate(270deg);
    }

    .ss {
      background-image: url(./images/second.png);
      transform: rotate(30deg);
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="hh" id="h"></div>
    <div class="mm" id="m"></div>
    <div class="ss" id="s"></div>
  </div>
  <script>
    const h = document.querySelector('#h')
    const m = document.querySelector('#m')
    const s = document.querySelector('#s')
    function clock() {
      const date = new Date()
      const hh = date.getHours()
      const mm = date.getMinutes()
      const ss = date.getSeconds()
      h.style.transform = `rotate(${hh * 30 + mm / 60 * 30}deg)`
      m.style.transform = `rotate(${mm * 6 + ss / 60 * 6}deg)`
      s.style.transform = `rotate(${ss * 6}deg)`
    }
    clock()
    setInterval(clock, 1000)
  </script>
</body>

</html>